<template>
	<div class="app-container" v-loading="loading">
		<div class="card-wrap flex-column justify-end card-padding">
			<div class="card-title-wrap">
				<span>加速折旧费方案配置</span>
				<span></span>
			</div>
			<el-form
				v-if="(form.data.length > 0 && loading === false) || loading === true"
				:model="form"
				ref="form"
				label-position="right"
				style="margin-top: 20px; min-height: 293.17px">
				<el-row>
					<el-col
						:span="24"
						class="col-wrap"
						v-for="(item, index) in form.data"
						:key="`checkList_${index}`">
						<el-form-item
							label-width="100px"
							label="方案名称:"
							prop="planName"
							class="text-day"
							:rules="{
								required: true,
								message: '请输入方案名称',
								trigger: 'blur',
								validator: (rule, value, callback) =>
									validData(rule, item.planName, callback),
							}">
							<el-input
								placeholder="请输入内容"
								v-model="item.planName"
								clearable></el-input>
						</el-form-item>
						<el-form-item
							label-width="100px"
							label="减免金额:"
							prop="deductionAmount"
							class="text-day"
							:rules="{
								required: true,
								message: '请输入减免金额',
								trigger: 'blur',
								validator: (rule, value, callback) =>
									validData(rule, item.deductionAmount, callback),
							}">
							<el-input
								maxlength="11"
								placeholder="请输入内容"
								v-model="item.deductionAmount"
								@input="
									item.deductionAmount = item.deductionAmount.replace(
										/^\D*([0-9]\d*\.?\d{0,2})?.*$/,
										'$1',
									)
								"
								clearable></el-input>
						</el-form-item>
						<span class="text-day">元</span>
						<el-form-item
							label-width="100px"
							label="比例:"
							prop="scale"
							class="text-day"
							:rules="{
								required: true,
								message: '请输入比例',
								trigger: 'blur',
								validator: (rule, value, callback) =>
									validData(rule, item.scale, callback),
							}">
							<el-input
								maxlength="8"
								placeholder="请输入内容"
								v-model="item.scale"
								@input="
									item.scale = item.scale.replace(
										/^\D*([0-9]\d*\.?\d{0,2})?.*$/,
										'$1',
									)
								"
								clearable></el-input>
						</el-form-item>
						<span class="text-day">%</span>
						<i
							class="el-icon-circle-plus-outline icon_add"
							v-if="index === form.data.length - 1"
							@click="add(index, 0)"></i>
						<i
							v-else
							class="el-icon-remove-outline icon_add"
							@click="sub(index, 0)"></i>
					</el-col>
				</el-row>
			</el-form>
			<div v-if="form.data.length == 0 && loading == false">
				<el-empty description="暂无可用的加速折旧费方案！"></el-empty>
			</div>
		</div>
		<div
			style="
				text-align: right;
				box-sizing: border-box;
				padding-right: 20px;
				margin-top: 20px;
				background-color: #fff;
				width: 100%;
				height: 60px;
				line-height: 60px;
				border-radius: 8px;
			">
			<el-button @click="refresh('form')">刷 新</el-button>
			<el-button
				v-if="form.data.length > 0 && loading === false"
				@click="save('form')"
				type="primary">
				保 存
			</el-button>
		</div>
	</div>
</template>

<script>
	import {
		getDataListConfig,
		submitDepreciationConfig,
	} from '@/api/IndexManagement/IndexManagement.js';
	export default {
		name: 'DepreciationCost',
		dicts: ['gps_alarm_type', 'gps_state'],
		data() {
			return {
				loading: true,
				form: {
					data: [{}],
				},
			};
		},
		mounted() {
			this.getDataListConfig();
		},
		methods: {
			// 保存数据
			async submitDepreciationConfig() {
				try {
					let res = submitDepreciationConfig(this.form.data);
					if (res) {
						this.$modal.msgSuccess('保存成功');
					}
				} catch (error) {}
			},
			async getDataListConfig() {
				try {
					this.loading = true;
					let { data } = await getDataListConfig();
					// let data = [];
					if (this.notEmpty(data)) {
						this.form.data = data;
					}
					this.loading = false;
				} catch (error) {
					this.loading = false;
				}
			},
			refresh(formName) {
				this.$refs?.[formName]?.resetFields?.();
				this.getDataListConfig();
				this.$modal.msgSuccess('刷新成功');
			},
			save(formName) {
				this.$refs[formName].validate(valid => {
					if (valid) {
						this.submitDepreciationConfig();
					} else {
						this.error();
						return false;
					}
				});
			},
			error() {
				this.$nextTick(() => {
					const el = document.querySelectorAll('.el-form-item__error')[0];
					el.scrollIntoView({ block: 'center', behavior: 'smooth' });
				});
			},
			add(index, type) {
				if (0 === type) {
					this.form.data.splice(index + 1, 0, {});
				} else if (1 === type) {
					this.form.stateList.splice(index + 1, 0, {});
				}
				this.$forceUpdate();
			},
			sub(index, type) {
				if (0 === type) {
					this.form.data.splice(index, 1);
				} else if (1 === type) {
					this.form.stateList.splice(index, 1);
				}
				this.$forceUpdate();
			},
			validData(rule, value, callback) {
				// console.log('aaa', rule, value, callback)
				if (!value) {
					// this.$modal.msgError(`未填写${value}`);
					callback(new Error(rule.message));
				} else {
					callback();
				}
			},
		},
	};
</script>

<style lang="scss" scoped>
	.col-wrap {
		display: flex;
		align-items: center;
		margin-bottom: 20px;
		justify-content: flex-start;
	}
	.text-day {
		margin-left: 10px;
		font-size: 14px;
	}
	.el-form-item--small.el-form-item {
		margin-bottom: 0 !important;
	}
	.icon_add {
		cursor: pointer;
		margin-left: 10px;
	}
</style>
